<template>
    <div>
        <!-- 活动封面 -->
        <div class="cover">
            <div class="coverMain">
                <div class="coverImg">
                    <el-image
                        v-show="URL"
                        :src="URL"
                        style="width:550px"
                        class="img"
                    ></el-image>
                    <div class="content" v-show="!URL">
                        <i class="el-icon-picture-outline contentIcon"></i>
                        <!-- <v-icon class="contentIcon">mdi-file-image-plus</v-icon> -->
                        <div class="text">请上传封面,仅支持JPG/GIF/PNG,3M以内</div>
                    </div>
                </div>
                <div class="coverContent">
                    <div class="inputContent" @click="uploadCover">
                        点击上传文件
                    </div>
                    <input type="file" class="input" ref="input" @change="selectCover" accept=".PNG,.GIF,.jpg,.jpeg">
                    <div class="text">
                        <i>*</i>
                        此处的图片为展示在宣传页面的封面，请谨慎选择。<br>
                        1、一张漂亮的海报,能让你的活动锦上添花,带来更多用户报名及增加传播效果哦~<br>
                        2、横图效果会更佳哦~<br>
                        3、如果用自己的封面,将有更多的机会被主页推荐。
                    </div>
                </div>
            </div>
            <i v-show="isShowCoverError"><div>请上传封面</div></i>
        </div>
        <el-dialog
            title=""
            :visible.sync="isShowCropper"
            width="width">
            <div>
                <Cropper ref="crop"></Cropper>
            </div>
            <div slot="footer">
                <el-button @click="isShowCropper = false">取 消</el-button>
                <el-button type="primary" @click="getCoverData">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Cropper from '@/components/Crop'
import {Message} from 'element-ui'
export default {
    name:"selectCover",
    components:{Cropper},
    props:['url'],
    data() {
        return {
            coverURL:'',
            isShowCover:false,
            isShowCoverError:false,
            isShowCropper:false,
            URL:'',//最终显示到页面上的图片链接
            coverFile:null,//封面文件
        }
    },
    watch:{
        //如果传入了路径，就显示图片
        url(newValue){
            this.coverURL = newValue
            this.isShowCover = true
        },
        coverURL(newValue){
            this.isShowCropper = true
            // this.$refs.cropper.url = newValue
            this.$nextTick(()=>{
                this.$refs.crop.url = newValue
            })
        }
    },
    methods:{
        uploadCover(){
            this.$refs.input.click()
        },
        selectCover(){
            let files = this.$refs.input.files
            //如果已经选择了文件，就返回该数据
            if(files.length>0){
                if(files[0].size/1024/1024>3){
                    Message({
                        type:'error',
                        showClose: true,
                        duration:1000,
                        message:'上传文件过大！，请重新选择'
                    })
                    return
                }
                this.isShowCoverError = false
                let newCover = URL.createObjectURL(files[0])
                this.coverURL = newCover
                this.isShowCoverError = false
                this.isShowCover = true
                //在这里返回该文件对象，由其他函数调用时进行获取
                return files[0]
            }else{
                return null
            }
        },
        //获取图片数据
        getCoverData(){
            this.isShowCropper = false
            let data = this.$refs.crop.getData()
            this.URL = data.url
            //将blob格式转化为file对象，进行文件上传
            var file = new File([data.file], '封面.png', {type:data.file.type, lastModified: Date.now()});
            this.coverFile = file
        }
    }
}
</script>

<style lang="scss" scoped>
i{
    color: red;
    div{
        font-size: 10px;
        font-style: normal;
        margin-left: 10px;
        margin-top: 4px;
    }
}
//活动封面
.coverMain{
    display: flex;
}

.cover{
    margin-top: 20px;
    .coverImg{
        width:550px;
        height:220px;
        // overflow: hidden;
        .img{
            width: 100%;
        }
        .content{
            width: 100%;
            height: 100%;
            background-color:rgb(214,214,214);
            text-align:center;
            .contentIcon{
                font-size: 65px;
                color: rgb(175,175,175);
                margin-top: 60px;
            }
            .text{
                margin-top: 15px;
                font-size: 13px;
            }
        }
    }
    .coverContent{
        margin-left: 10px;
        flex:0 1 auto;
        .inputContent{
            flex: 0 1 atuo;
            padding: 10px 20px;
            background-color:rgb(64, 158, 255);
            border-radius:3px;
            color: white;
            width: 140px;
            &:hover{
                cursor: pointer;
            }
        }
        .input{
            display: none;
        }
        .text{
            margin-top: 10px;
            font-size: 10px;
            color: rgb(185, 185, 185);
        }
    }
} 
</style>